<template>
    <!--园区能耗统计-->
    <div class="energySiderLeft">
        <common-border-large width="100%" height="100%" text="园区能耗统计">
            <div class="content_1">
                <!--今日能耗量-->
                <CustomEnergySiderLeftTodayEnergy></CustomEnergySiderLeftTodayEnergy>
            </div>
            <div class="energyElectric">
                <!-- 用电量 -->
                <CustomEnergySiderLeftEngryElectric></CustomEnergySiderLeftEngryElectric>
            </div>
            <div class="energyWater">
                <!-- 用水量 -->
                <CustomEnergySiderLeftEngryWater></CustomEnergySiderLeftEngryWater>
            </div>
            <div class="energyGas">
                <!-- 用气量 -->
                <CustomEnergySiderLeftEngryGas></CustomEnergySiderLeftEngryGas>
            </div>
        </common-border-large>
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped lang="scss">
.energySiderLeft {
    height: 100%;
    .content_1{
        height: 25.5%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .energyElectric{
        height: calc((100% - 25.5% - 20px) / 3);
    }
    .energyWater{
        height: calc((100% - 25.5% - 20px) / 3);
    }
    .energyGas{
        height: calc((100% - 25.5% - 20px) / 3);
    }
}
</style>
